import React,{Component} from 'react'
import * as pub from '../../config/public';
import Course from '../Course'
import Pages from '../Pages'
import * as fetch from '../../config/fetch'
import {Spin,message,Button} from 'antd'
import User from './User'
import {Link,browserHistory} from 'react-router'
import Layer from '../Layer';
class LearnDynamic extends Component {
	constructor(props) {
		super();
		this.state = {
			CourseList:[],
			jumpPage: 1,
			totalPage: 0 ,
			loading : false,
		}
	}
	courseClick(){
        pub.loading(this,true);
		fetch.courseClick({pageno:this.state.jumpPage}).then((data) => {
			this.setState({
		     	CourseList:data.myCourseList?data.myCourseList:[],
				totalPage:data.totalPage
			});
			pub.loading(this,false);
		},(res)=>{
			pub.loading(this,false);
			pub.reject(res);
		})
	}
    componentWillMount() {
		this.courseClick();
	}
	jump(page) {
		this.setState({
			jumpPage:page,
		},()=>{
			this.courseClick();
		})
	}
	render(){
		return(
			<div>
				<Spin spinning={this.state.loading} tip="加载列表中...">
				<ul className="common-course clearFix">
					{this.state.CourseList.map((item,index)=>{
						return(
								<li key={index}>
								<Course id={item.courseId} item={item} courseClick={this.courseClick.bind(this)}/>
								</li>
							)
					})}
				</ul>	
				</Spin>
				<div className="line"></div>
		    	 <Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} courseClick={this.courseClick.bind(this)}/>
			</div>	
			)
	}
}
class Chat extends Component {
	constructor(args) {
		super();
		this.state = {
			ChatList:[],
			jumpPage: 1,
			totalPage: 0 ,
			loading : false,
			visibleDH:false,
			loadBtning:false
		}
	}
	hideModelDH(){
			this.setState({
				visibleDH: false,
			});
	}
	ok(id){
		pub.loadBtning(this,true);
		fetch.cashEssay({essayId:id}).then((data)=>{
			if(data.result === 'RC100'){
				message.success(data.errMsg, 3)
				pub.jumpHistory.push("/ArticleDetail/" +id)
			}else{
				message.error(data.errMsg, 3);
			}
			pub.loadBtning(this,false);
		}, (res) => {
			pub.reject(res);
			pub.loadBtning(this,false);
		})
	}
	clickArticle(item) {
		if (item.goodEssay === '1') {
			if (item.userEssayOperation.isBuy === 1) {
				pub.jumpHistory.push("/ArticleDetail/" + item.essayId)
			} else {
				this.setState({
					visibleDH: true,
					essayId: item.essayId,
					studyIntegral: item.exchangeIntegral
				})
			}
		} else {
			pub.jumpHistory.push("/ArticleDetail/" + item.essayId)
		}
	}
	essayClick(){
       pub.loading(this,true);
		fetch.essayClick({pageno:this.state.jumpPage}).then((data) => {
			if(data.result==='RC100'){
              this.setState({
				ChatList:data.myEssayDongList,
				totalPage:data.totalPage
			});
			}else{
              message.error(data.errMsg, 3);
			}
			pub.loading(this,false);
		},(res)=>{
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	componentWillMount() {
		this.essayClick();
	}
	jump(page) {
		this.setState({
			jumpPage:page
		},()=>{
			this.essayClick();
		})
	}
    operate(id, type) {
		fetch.operateArticle(id, type).then((data) => {
			if (data.result === 'RC100') {
				this.essayClick();
				message.success(data.msg, 3);
			}else{
				message.error(data.errMsg, 3);
			}
		})
	}
	render(){
		let ChatList=this.state.ChatList;
		return(
			<div className="row">
				<Spin spinning={this.state.loading} tip="加载列表中...">
				{ChatList.map((item,index)=>{
					return(
						<div key={index} className="jl-list panel-95 bg-FFFFFF box-shadow">
							<Link onClick={() => this.clickArticle(item)}>
								<div className="title">{item.essayTitle}</div>
								<div className="user">
								<img  src={pub.getFile(item.headPath)} onError={(e) => pub.headImageError(e)} alt='test'/>
									<span>{item.userRealName}</span>
								</div>
								<div className="content">
									<p className="shorthand">{item.essayNote?pub.subString(item.essayNote,100):'没有文字'}</p>
								</div>
							</Link>
								<div className="time-like">
									<span className="item-time"><i className="icon-time"></i>{pub.formatTimestamp(item.createTime)}</span>
									{/*<span><i className="icon-thumbs-up"></i>{item.sumLike?item.sumLike:''}</span>*/}
									<span onClick={()=>this.operate(item.essayId,'0')} style={{opacity:item.userEssayOperation.isLike === 1 ? 1:0.4}}><i className="icon-thumbs-up"></i>{item.sumLike}</span>
								</div>
								<div>
									{
										item.goodEssay===1||item.goodEssay==='1'?<div className="jingDyEssay"></div>:null
									}
								</div>
						</div>
						)
				})}
				</Spin>
				<Layer
									title="设置兑换积分"
									show={this.state.visibleDH}
									hide={(e) => { this.setState({ visibleDH: false,loadBtning:false}) }}
									width="400px"
									height="270px"
								>
									<div className="row">
										<div className="pop-box-1" style={{ textAlign: 'left' }}>
											<p style={{ textAlign: 'center' }}>您需要{this.state.studyIntegral}积分兑换该文章</p>
										</div>
										<div className="pop-btn">
											<Button loading={this.state.loadBtning} onClick={() => this.hideModelDH()} className="btn btn-blue" style={{ borderRadius: '5px', marginRight: '50px' }}>取消</Button>
											<Button loading={this.state.loadBtning} className="btn btn-blue" style={{ borderRadius: '5px' }} onClick={() => this.ok(this.state.essayId)}>确认</Button>
										</div>
									</div>
								</Layer>
			 <div className="line"></div>
			 <Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} />
		   </div>
		   	
			)
	}
}
class Dynamic extends Component {
	constructor(props) {
		super(props);
		this.state = {
			CourseList:pub.getObject(6),
			kcPage: 1,
			fengxinPage:1,
			totalPage: 0 ,
		}
	}

	render(){
		return(
			<div>
				<div className="left-layout">

					<div className="common-title" style={{marginTop:'0px'}}>
						<span>课程动态</span>
						<Link className="floatR" to={"/CourseMore"}>
					       更多&gt;
						</Link>
					</div>
					 <LearnDynamic />

					 <div className="common-title">
						<span>{(JSON.parse(localStorage.getItem('user')).channelId)==='4'?'星行圈动态':'蜂行圈动态'}</span>
						<Link className="floatR" to={"/CharMore"}>
						   更多&gt;
						</Link>
					</div>
					<Chat />
				</div>

				<div className="right-layout-top">
				    <User/>
				</div>
                  
			</div>
			)
	}
}
export default Dynamic;